<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>{$templateTitle}</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/chat.css" />
    <script src="__PUBLIC__/home/js/jquery.js"></script>
    <script src="__PUBLIC__/home/js/flexible.js"></script>
    <script src="__PUBLIC__/vendors/layer/mobile/layer.js"></script>

</head>
<body>
<header class="header">
    <a class="back" href="javascript:history.back()" style="background: url('__PUBLIC__/home/images/a19.png') no-repeat;background-size: 0.2rem 0.4rem;">
    </a>
    <h5 class="tit">客服</h5>
</header>
<div class="message">
    {foreach $list as $item}
    {if $item.send_id eq 0}
    <div class="send">
        <div class="time">{:date('m-d H:i', $item.create_time)}</div>
        <div class="msg">
            <img src="{$logo}" alt="" />
            <p>
                {if $item.type eq 1}
                <i class="msg_input"></i>{$item.content}
                {else}
                <img src='{$item.content}' alt='' style='width: 120px;'>
                {/if}
            </p>
        </div>
    </div>
    {else}
    <div class="show">
        <div class="time">{:date('m-d H:i', $item.create_time)}</div>
        <div class="msg">
            <img src="{$avatar}" alt=""/>
            <p>
                {if $item.type eq 1}
                <i class="msg_input"></i>{$item.content}
                {else}
                <img src='{$item.content}' alt='' style='width: 120px;'>
                {/if}
            </p>
        </div>
    </div>
    {/if}
    {/foreach}
</div>
<div class="footer">
    <input class="cont_msg" type="text" style="width: 3.5rem;" />
    <p style="width: 1rem;" class="pic_btn">图片</p>
    <p class="send_p">发送</p>
    <input type="file" name="image" style="display: none" onchange="imgChange(this)">
</div>
</body>
<script>
    var avatar = "{$avatar}", logo="{$logo}", last_id="{$last_id}";

    /*发送消息*/
    function send(headSrc,str, type){
        if(type == 1){
            var html="<div class='send'><div class='msg'><img src="+headSrc+" />"+
                "<p><i class='msg_input'></i>"+str+"</p></div></div>";
        }else{
            var html="<div class='show'><div class='msg'><img src="+headSrc+" />"+
                "<p><img src='"+str+"' alt='' style='width: 120px;'></p></div></div>";
        }
        upView(html);
    }
    /*接受消息*/
    function show(headSrc,str, type){
        if(type == 1){
            var html="<div class='show'><div class='msg'><img src="+headSrc+" />"+
                "<p><i class='msg_input'></i>"+str+"</p></div></div>";
        }else{
            var html="<div class='show'><div class='msg'><img src="+headSrc+" />"+
                "<p><img src='"+str+"' alt='' style='width: 120px;'></p></div></div>";
        }
        upView(html);
    }
    /*更新视图*/
    function upView(html){
        $('.message').append(html);
        $('html,body').animate({ scrollTop:($('.message').outerHeight()-window.innerHeight)},200);
        $('.footer p').prev().val("");
    }
    $(function(){
        $('.footer').on('keyup','.cont_msg',function(){
            if($(this).val().length>0){
                $(this).next().next().css('background','#114F8E').prop('disabled',true);

            }else{
                $(this).next().next().css('background','#ddd').prop('disabled',false);
            }
        })
        $('.footer .send_p').click(function(){
            let con = $(this).prev().prev().val();
            $.post("{:url('send_msg')}", {con:con, type:1}, function (res) {
                if(res.result_code == 0){
                    // last_id = res.result_data;
                    show(avatar,con, 1);
                }else{
                    layer.open({
                        content:'发送失败',
                        skin:"msg",
                        time:1
                    })
                }
            });

        })
        setInterval(function () {
            getChat();
        }, 3000);
    })

    /**
     * 获取聊天记录
     */
    function getChat(){
        $.post("{:url('getChatList')}", {last_id:last_id}, function (res) {
            let msg_data = res.result_data.msg_data;
            if(!isNaN(res.result_data.last_id) && parseInt(res.result_data.last_id)>0){
                last_id = res.result_data.last_id;
            }
            $.each(msg_data, function (i,v) {
                send(logo, v.content, v.type);
            })
        });
    }
</script>
<script>
    var is_app=0;
    try {
        is_app = android.getType();
    }catch (e) {

    }
    $(function(){
        $(".pic_btn").click(function(){
            if(is_app==1){
                android.uploadImage(location.origin+"/home/Upload/index.html");
            }else{
                $(this).siblings("input[name='image']").click();
            }
        });
    })
</script>
<script>
    //安卓回调
    function setImage(img_url) {
        $.post("{:url('send_msg')}", {con:img_url, type:2},function (res) {
            if(res.result_code == 0){
                // last_id = res.result_data;
                show(avatar,img_url, 2);
            }else{
                layer.open({
                    content:'发送失败',
                    skin:"msg",
                    time:1
                })
            }
        });
    }
    function imgChange(obj) {
        var docObj=$(obj).get(0);
        if (docObj.files && docObj.files[0]) {
            if(!/image\/\w+/.test(docObj.files[0].type)){
                //图片文件的type值为image/png或image/jpg
                layer.msg("文件必须为图片！");
                return false;
            }
            var formData = new FormData();
            formData.append("image",docObj.files[0]);
            $.ajax({
                url: "{:url('Upload/index')}",
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (rs) {
                    if(rs.result_code=='0000'&&rs.result_data!=''){
                        setImage(rs.result_data);
                    }else{
                        layer.msg('图片有误请更换图片');
                    }
                },
                error: function () {
                    layer.msg('system error');
                }
            });
        } else {
            layer.msg('请上传图片');
        }
        return true;
    }
</script>
</html>
